<template>
  <div class="div-1">
    <el-page-header>
      <template #breadcrumb>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ name: 'MyCeHome' }">
            首页
          </el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'UserList' }"
            >用户管理</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ name: 'UserList' }"
            >用户列表</el-breadcrumb-item
          >
        </el-breadcrumb>
      </template>
      <template #content>
        <span class="text-large font-600 mr-3"> Title </span>
      </template>
    </el-page-header>

    <main>
      <!-- 搜索 -->
      <div class="main-div">
        <div class="mt-4">
          <el-input
            v-model="input2"
            placeholder="请输入内容"
            class="input-with-select"
            clearable
          >
            <template #append>
              <el-button :icon="Search" @click="searchText" />
            </template>
          </el-input>
        </div>
        <el-button type="primary" @click="addUser">添加用户</el-button>
      </div>
      <!-- 主要内容 -->
      <div class="main-div-2">
        <table cellspacing="0" cellpadding="0">
          <thead>
            <tr>
              <th>&nbsp;</th>
              <th>姓名</th>
              <th>邮箱</th>
              <th>电话</th>
              <th>角色</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr
              v-for="(f, index) in ulist.rendererList"
              :key="f.id"
              ref="tbodyTrs"
            >
              <td>{{ index + 1 }}</td>
              <td>{{ f.username }}</td>
              <td>{{ f.email }}</td>
              <td>{{ f.mobile }}</td>
              <td>{{ f.role_name }}</td>
              <td>
                <el-button type="primary" @click="sthBtn(f.username, f.id)"
                  >更新</el-button
                >
                <!-- <el-switch v-model="value2" @click="sthBtn(f.username)"  /> -->
              </td>
              <td>
                <el-button
                  type="primary"
                  :icon="Edit"
                  circle
                  @click="amendUsers(f.id)"
                />
                <el-button
                  type="danger"
                  :icon="Delete"
                  circle
                  @click="deleteUser(f.id, index)"
                />
                <el-button
                  type="warning"
                  :icon="Star"
                  circle
                  @click="allocationUsers(f.id, f.role_name, f.username)"
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 页码 -->
      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[1, 2, 5, 10]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="ulist.listNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>

      <!-- 添加用户 -->
      <AddUsers v-if="ulist.isAddUsers" @aaa="aaa" />
      <!-- 修改用户 -->
      <AmendUsers v-if="ulist.isAmendUsers" @bbb="bbb" :heihei="childAmend" />
      <!-- 分配用户角色 -->
      <AllocationUsers
        v-if="ulist.isAllocationUsers"
        @ccc="ccc"
        :haha="childAllocationUsers"
      />
    </main>
  </div>
</template>

<script setup>
import AddUsers from "../../components/AddUsers";
import AmendUsers from "../../components/AmendUsers";
import AllocationUsers from "../../components/AllocationUsers";
import VueCookies from "vue-cookies";
import axios from "axios";
import { Search } from "@element-plus/icons-vue";
import {
  ref,
  reactive,
  computed,
  onMounted,
  watchEffect,
  onUnmounted,
} from "vue";
import { Edit, Delete, Star } from "@element-plus/icons-vue";
// 获取输入框内容
let input2 = ref("");

// 页码组件
const currentPage4 = ref(1);
const pageSize4 = ref(1);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);

// 每页显示条数
const handleSizeChange = (val) => {
  console.log(`${val} 每页显示条数`);
  ulist.itemNum = val;
  axios({
    url: "/api/users",
    method: "get",
    // 请求头加入token
    headers: {
      Authorization: VueCookies.get("token"),
    },
    params: {
      // 当前页码
      pagenum: ulist.currentNum,
      // 每页显示条数
      pagesize: ulist.itemNum,
      // 搜索
      query: input2.value,
    },
  }).then((res) => {
    // 改变总页数
    ulist.listNum = res.data.data.total;
    ulist.rendererList = res.data.data.users;
  });
};
// 当前页数
const handleCurrentChange = (val) => {
  console.log(`当前页数: ${val}`);
  ulist.currentNum = val;
  axios({
    url: "/api/users",
    method: "get",
    // 请求头加入token
    headers: {
      Authorization: VueCookies.get("token"),
    },
    params: {
      // 当前页码
      pagenum: ulist.currentNum,
      // 每页显示条数
      pagesize: ulist.itemNum,
      // 搜索
      query: input2.value,
    },
  }).then((res) => {
    // 改变总页数
    ulist.listNum = res.data.data.total;
    ulist.rendererList = res.data.data.users;
  });
};
// 数据列表
let ulist = reactive({
  // 总页数
  sumNum: 0,
  // 每页显示条数
  itemNum: pageSize4.value,
  // 当前页数
  currentNum: currentPage4.value,
  // 学生列表
  listNum: 0,
  // 渲染数据
  rendererList: [],
  // 显示添加用户遮罩层
  isAddUsers: false,
  // 修改用户信息遮罩层
  isAmendUsers: false,
  // 修改用户权限
  isAllocationUsers: false,
});
// 更新状态
let value2 = ref();
// 获取所有tbody里面的tr
let tbodyTrs = ref([]);
// 修改用户需要传子组件的值
let childAmend = ref("");
//
let childAllocationUsers = reactive({
  id: 0,
  role: "",
  name: "",
});
// 更新状态
function sthBtn(e, id) {
  console.log(e, id, VueCookies.get("token"));
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  axios.put(`/api/users/${id}/state/${true}}`, { headers }).then((res) => {
    // alert(res.data.meta.msg);
    console.log(res);
  });
}
// 搜索
function searchText() {
  console.log(input2.value);
  axios({
    url: "/api/users",
    method: "get",
    // 请求头加入token
    headers: {
      Authorization: VueCookies.get("token"),
    },
    params: {
      // 当前页码
      pagenum: ulist.currentNum,
      // 每页显示条数
      pagesize: ulist.itemNum,
      // 搜索
      query: input2.value,
    },
  }).then((res) => {
    // 改变总页数
    ulist.listNum = res.data.data.total;
    ulist.rendererList = res.data.data.users;
  });
}
// 添加用户
function addUser() {
  ulist.isAddUsers = true;
}
// 添加用户子传父
function aaa(val) {
  console.log("子传父", val);
  ulist.isAddUsers = val;
}
// 修改用户
function amendUsers(id) {
  ulist.isAmendUsers = true;
  //
  childAmend.value = id;
}
// 修改用户子传父
function bbb(val) {
  console.log("子传父", val);
  ulist.isAmendUsers = val;
}
// 修改用户权限
function ccc(val) {
  console.log("子传父", val);
  ulist.isAllocationUsers = val;
}
// 修改用户权限
function allocationUsers(id, role, name) {
  ulist.isAllocationUsers = true;
  childAllocationUsers.id = id;
  childAllocationUsers.role = role;
  childAllocationUsers.name = name;
}
// 删除用户
function deleteUser(id, index) {
  const headers = {
    Authorization: VueCookies.get("token"),
  };
  axios.delete(`/api/users/${id}`, { headers }).then((res) => {
    alert(res.data.meta.msg);
    if (res.data.meta.msg !== "不允许删除admin账户") {
      // 删除dom元素
      ulist.rendererList.splice(index, 1);
    }
  });
}

onMounted(() => {
  console.log(ulist.currentNum, ulist.itemNum);
  axios({
    url: "/api/users",
    method: "get",
    // 请求头加入token
    headers: {
      Authorization: VueCookies.get("token"),
    },
    params: {
      // 当前页码
      pagenum: ulist.currentNum,
      // 每页显示条数
      pagesize: ulist.itemNum,
    },
  }).then((res) => {
    // 改变总页数
    ulist.listNum = res.data.data.total;
    ulist.rendererList = res.data.data.users;
    console.log(ulist.rendererList);
  });
});
</script>

<style scoped>
/* 添加用户 */

/*  */
.div-1 {
  flex-grow: 1;
  height: auto;
  padding: 20px;
}
/* 搜索 */
main {
  flex-grow: 1;
  height: auto;
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  position: relative;
}
.main-div {
  width: 470px;
  height: 50px;
  display: flex;
  justify-content: space-between;
}
.main-div >>> .el-input__inner {
  width: 300px;
  font-size: 16px !important;
  position: relative;
}
.main-div >>> .el-input__suffix {
  position: absolute;
  right: 10px;
}
.main-div >>> button {
  height: 50px;
}
.main-div-2 {
  width: 100%;
  height: auto;
  margin: 10px 0px;
}

tr,
td,
th {
  border: 1px solid;
  padding: 10px;
}
table {
  width: 100%;
  height: 50px;
  border: 1px solid;
}
thead {
  width: 100%;
  height: 50px;
  border: 1px solid;
}
</style>